<template>
  <div class="flow-menu" ref="tool">
    <div class="top">
      <span>模板图片</span>
      <el-upload class="avatar-uploader avataruploadertext" action="" :show-file-list="false"
        :on-change="photoOnChange" :auto-upload="false">
        <img v-if="ruleForm.backgroundpic" :src="SRCL + ruleForm.backgroundpic" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>

    <div v-for="menu  in  menuList" :key="menu.id">
      <span class="ef-node-pmenu" @click="menu.open = !menu.open">{{menu.name}}</span>
      <ul v-show="menu.open" class="ef-node-menu-ul">
        <draggable @end="end" @start="move" v-model="menu.children" :options="draggableOptions"
          class="divLi">
          <li v-for="subMenu in menu.children" class="ef-node-menu-li" :key="subMenu.id"
            :type="subMenu.type">{{subMenu.name}}
          </li>
        </draggable>
      </ul>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import VolForm from "@/components/basic/VolForm.vue";
var mousePosition = {
  left: -1,
  top: -1,
};

export default {
  components: {
    draggable,
    VolForm,
  },
  data() {
    return {
      activeNames: "1",
      // draggable配置参数参考 https://www.cnblogs.com/weixin186/p/10108679.html
      draggableOptions: {
        preventOnFilter: false,
        sort: false,
        disabled: false,
        ghostClass: "tt",
        // 不使用H5原生的配置
        forceFallback: true,
        // 拖拽的时候样式
        // fallbackClass: 'flow-node-draggable'
      },
      // 默认打开的左侧菜单的id
      defaultOpeneds: ["1", "2"],
      menuList: [
        {
          id: "1",
          type: "group",
          name: "基本信息",
          ico: "el-icon-video-play",
          open: true,
          children: [
            {
              id: "11",
              type: "name",
              name: "姓名",
              style: {},
            },
            {
              id: "12",
              type: "gender",
              name: "性别",
              style: {},
            },
            {
              id: "13",
              type: "height",
              name: "身高",
              style: {},
            },
            {
              id: "14",
              type: "IdCard",
              name: "证件号",
              style: {},
            },
            {
              id: "15",
              type: "shoeSize",
              name: "鞋码",
              style: {},
            },
            {
              id: "16",
              type: "weight",
              name: "体重",
              style: {},
            },
            {
              id: "17",
              type: "parentsPhone",
              name: "监护人手机",
              style: {},
            },
            {
              id: "18",
              type: "parentsName",
              name: "监护人姓名",
              style: {},
            },
            {
              id: "19",
              type: "remarks",
              name: "注意事项/备注",
              style: {},
            },
          ],
        },
      ],
      nodeMenu: {},
      SRCL: "",
      ruleForm: {
        backgroundpic: "",
      },
    };
  },

  created() {
    this.SRCL = this.http.ipAddress;
    /**
     * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
     * @param event
     */
    if (this.isFirefox()) {
      document.body.ondrop = function (event) {
        // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
        mousePosition.left = event.layerX;
        mousePosition.top = event.clientY - 50;
        event.preventDefault();
        event.stopPropagation();
      };
    }
  },
  methods: {
    setPIC(e) {
      this.ruleForm.backgroundpic = e
    },
    async photoOnChange(file) {
      let formData = new FormData();
      formData.append("fileInput", file.raw);
      let data = await this.http.post(
        "api/Mall_camp_configuration/Upload",
        formData
      );
      this.ruleForm.backgroundpic = data.data + file.raw.name;
      this.$emit("imgURL", this.ruleForm.backgroundpic);
    },
    // 根据类型获取左侧菜单对象
    getMenuByType(type) {
      for (let i = 0; i < this.menuList.length; i++) {
        let children = this.menuList[i].children;
        for (let j = 0; j < children.length; j++) {
          if (children[j].type === type) {
            return children[j];
          }
        }
      }
    },
    // 拖拽开始时触发
    move(evt, a, b, c) {
      var type = evt.item.attributes.type.nodeValue;
      this.nodeMenu = this.getMenuByType(type);
    },
    // 拖拽结束时触发
    end(evt, e) {
      this.$emit("addNode", evt, this.nodeMenu, mousePosition);
    },
    // 是否是火狐浏览器
    isFirefox() {
      var userAgent = navigator.userAgent;
      if (userAgent.indexOf("Firefox") > -1) {
        return true;
      }
      return false;
    },
  },
};
</script>
<style lang="less" scoped>
.ef-node-menu-li {
  width: 100px;
  margin-right: 5px;
  text-align: center;
}
.divLi {
  display: flex;
  flex-wrap: wrap;
}
.top {
  margin: 10px;
}
/deep/.avatar-uploader {
  display: inline-block;
  .avatar {
    width: 100px;
    height: 100px;
  }
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
  }
  .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
}
</style>